<template>
    <el-row :gutter="20">
        <el-col :span="6">
            <ChartsCard>
                <template #chart-title>
                    今日销售额
                </template>
                <template #chart-number>
                    {{chartData.salesToday }}
                </template>
                <template #charts>
                        <div style="font-size:12px;font-weight:700; margin:10px 0px ; ">
                            <span>日同比:{{chartData.salesGrowthLastDay}}</span><svg style="margin-left:5px" t="1664447791765"
                                class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                p-id="5503" width="16" height="16">
                                <path
                                    d="M901.333333 682.666667h-138.666666a37.373333 37.373333 0 0 0-37.333334 37.333333v224a37.373333 37.373333 0 0 0 37.333334 37.333333h138.666666a37.373333 37.373333 0 0 0 37.333334-37.333333v-224a37.373333 37.373333 0 0 0-37.333334-37.333333z m-5.333333 256h-128v-213.333334h128zM304 384H165.333333a37.373333 37.373333 0 0 0-37.333333 37.333333v522.666667a37.373333 37.373333 0 0 0 37.333333 37.333333h138.666667a37.373333 37.373333 0 0 0 37.333333-37.333333V421.333333a37.373333 37.373333 0 0 0-37.333333-37.333333z m-5.333333 554.666667H170.666667V426.666667h128z m304-384H464a37.373333 37.373333 0 0 0-37.333333 37.333333v352a37.373333 37.373333 0 0 0 37.333333 37.333333h138.666667a37.373333 37.373333 0 0 0 37.333333-37.333333V592a37.373333 37.373333 0 0 0-37.333333-37.333333z m-5.333334 384H469.333333V597.333333h128z m341.333334-490.666667v128a21.213333 21.213333 0 0 1-6.16 14.993333A21.213333 21.213333 0 0 1 917.333333 597.333333h-128a21.333333 21.333333 0 0 1 0-42.666666h76.5L576 264.833333 463.086667 377.753333a21.333333 21.333333 0 0 1-30.173334 0l-298.666666-298.666666a21.333333 21.333333 0 0 1 30.173333-30.173334L448 332.5l112.913333-112.92a21.333333 21.333333 0 0 1 30.173334 0L896 524.5V448a21.333333 21.333333 0 0 1 42.666667 0z"
                                    fill="#17abe3" p-id="5504"></path>
                            </svg>
                        </div>
                        <div style="font-size:12px;font-weight:700"><span>月同比:{{chartData.salesGrowthLastMonth}}</span><svg
                                style="margin-left:5px" t="1664447981529" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="9959" width="16" height="16">
                                <path
                                    d="M906.472727 266.007273c18.850909 0 34.117818 15.266909 34.117818 34.117818v192.605091a28.439273 28.439273 0 1 1-56.878545 0v-130.327273l-297.378909 297.425455a28.020364 28.020364 0 0 1-35.700364 3.258181l-3.863272-3.258181-162.024728-161.978182-252.928 252.881454a28.020364 28.020364 0 1 1-39.610182-39.563636l272.756364-272.756364a28.020364 28.020364 0 0 1 39.563636 0l161.978182 162.024728 277.550546-277.550546h-126.976a28.439273 28.439273 0 1 1 0-56.878545h189.393454z"
                                    fill="#db639b" p-id="9960"></path>
                            </svg></div>
                </template>
                <template #chart-footer>
                    <div>昨日销售额￥{{chartData.salesLastDay}}</div>
                </template>
            </ChartsCard>
        </el-col>
        <el-col :span="6">
            <ChartsCard>
                <template #chart-title>
                    今日订单
                </template>
                <template #chart-number>
                    {{chartData.orderToday }}
                </template>
                <template #charts>
                    <Linechart :data="chartData.orderTrend"></Linechart>
                </template>
                <template #chart-footer>
                    <div>昨日订单量￥{{chartData.orderLastDay}}</div>
                </template>
            </ChartsCard>
        </el-col>
        <el-col :span="6">
            <ChartsCard>
                <template #chart-title>
                    今日交易用户数
                </template>
                <template #chart-number>
                    {{chartData.orderUser }}
                </template>
                <template #charts>
                    <Barchart :data="chartData.orderUserTrend"></Barchart>
                </template>
                <template #chart-footer>
                    <div>退货率{{chartData.returnRate}}%</div>
                </template>
            </ChartsCard>
        </el-col>
        <el-col :span="6">
            <ChartsCard>
                <template #chart-title>
                    累计用户数
                </template>
                <template #chart-number>
                    {{chartData.usersTotal }}
                </template>
                <template #charts>
                    <Progesschart></Progesschart>
                </template>
                <template #chart-footer>
                    <div>
                        <span>日同比:{{chartData.userGrowthLastDay}}%<svg t="1664448360307" class="icon"
                                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11938"
                                width="16" height="16">
                                <path
                                    d="M304 682.666667H165.333333a37.373333 37.373333 0 0 0-37.333333 37.333333v224a37.373333 37.373333 0 0 0 37.333333 37.333333h138.666667a37.373333 37.373333 0 0 0 37.333333-37.333333v-224a37.373333 37.373333 0 0 0-37.333333-37.333333z m-5.333333 256H170.666667v-213.333334h128z m304-384H464a37.373333 37.373333 0 0 0-37.333333 37.333333v352a37.373333 37.373333 0 0 0 37.333333 37.333333h138.666667a37.373333 37.373333 0 0 0 37.333333-37.333333V592a37.373333 37.373333 0 0 0-37.333333-37.333333z m-5.333334 384H469.333333V597.333333h128z m304-554.666667h-138.666666a37.373333 37.373333 0 0 0-37.333334 37.333333v522.666667a37.373333 37.373333 0 0 0 37.333334 37.333333h138.666666a37.373333 37.373333 0 0 0 37.333334-37.333333V421.333333a37.373333 37.373333 0 0 0-37.333334-37.333333z m-5.333333 554.666667h-128V426.666667h128z m42.666667-874.666667v128a21.333333 21.333333 0 0 1-42.666667 0V115.5L633.753333 377.753333a21.333333 21.333333 0 0 1-30.173333 0L490.666667 264.833333 164.42 591.086667a21.333333 21.333333 0 0 1-30.173333-30.173334l341.333333-341.333333a21.333333 21.333333 0 0 1 30.173333 0L618.666667 332.5 865.833333 85.333333H789.333333a21.333333 21.333333 0 0 1 0-42.666666h128a21.213333 21.213333 0 0 1 14.993334 6.16l0.046666 0.046666A21.213333 21.213333 0 0 1 938.666667 64z"
                                    fill="#e89abe" p-id="11939"></path>
                            </svg></span>
                        <span style="margin-left:5px">月同比:{{chartData.userGrowthLastMonth}}%<svg t="1664448461045" class="icon"
                                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18572"
                                width="16" height="16">
                                <path
                                    d="M901.333333 682.666667h-138.666666a37.373333 37.373333 0 0 0-37.333334 37.333333v224a37.373333 37.373333 0 0 0 37.333334 37.333333h138.666666a37.373333 37.373333 0 0 0 37.333334-37.333333v-224a37.373333 37.373333 0 0 0-37.333334-37.333333z m-5.333333 256h-128v-213.333334h128zM304 384H165.333333a37.373333 37.373333 0 0 0-37.333333 37.333333v522.666667a37.373333 37.373333 0 0 0 37.333333 37.333333h138.666667a37.373333 37.373333 0 0 0 37.333333-37.333333V421.333333a37.373333 37.373333 0 0 0-37.333333-37.333333z m-5.333333 554.666667H170.666667V426.666667h128z m304-384H464a37.373333 37.373333 0 0 0-37.333333 37.333333v352a37.373333 37.373333 0 0 0 37.333333 37.333333h138.666667a37.373333 37.373333 0 0 0 37.333333-37.333333V592a37.373333 37.373333 0 0 0-37.333333-37.333333z m-5.333334 384H469.333333V597.333333h128z m341.333334-490.666667v128a21.213333 21.213333 0 0 1-6.16 14.993333A21.213333 21.213333 0 0 1 917.333333 597.333333h-128a21.333333 21.333333 0 0 1 0-42.666666h76.5L576 264.833333 463.086667 377.753333a21.333333 21.333333 0 0 1-30.173334 0l-298.666666-298.666666a21.333333 21.333333 0 0 1 30.173333-30.173334L448 332.5l112.913333-112.92a21.333333 21.333333 0 0 1 30.173334 0L896 524.5V448a21.333333 21.333333 0 0 1 42.666667 0z"
                                    fill="#7dc5eb" p-id="18573"></path>
                            </svg></span>
                    </div>
                </template>
            </ChartsCard>
        </el-col>
    </el-row>

</template>

<script setup lang="ts">
import ChartsCard from './ChartsCard/index.vue'
import Linechart from './lineCharts/index.vue'
import Barchart from './barchart/index.vue'
import Progesschart from './progressChart/index.vue'
defineProps(['chartData']);

</script>

<style scoped>

</style>